body,
html {
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

/* 头部 */
#header {
    width: 6.94rem;
    height: 1.68rem;
    padding-left: 0.28rem;
    padding-right: 0.28rem;
    background: #e94544;
    display: flex;
    flex-direction: column;
}

/* 头部上半部分 */
#header .top {
    width: 6.94rem;
    height: 0.87rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header .top span:nth-child(1) {
    font-size: 0.2rem;
    color: white;
}

#header .top span:nth-of-type(2) {
    font-size: 0.4rem;
    color: white;
}

#header .top a {
    background: url(../images/24.jpg) no-repeat right center;
    font-size: 0.26rem;
    color: white;
    margin-left: 0.05rem;
    margin-right: 0.2rem;
    flex: 1;
}

/* 头部下半部分 */
#header .bottom {
    width: 6.94rem;
    height: 0.62rem;
    display: flex;
    position: relative;
}

#header .bottom a:nth-of-type(1) {
    position: absolute;
    top: 50%;
    margin-top: -0.15rem;
    left: 0.2rem;
}

#header .bottom a:nth-of-type(1) img {
    width: 0.3rem;
    height: 0.3rem;
}

#header .bottom a:nth-of-type(2) {
    position: absolute;
    top: 50%;
    margin-top: -0.12rem;
    right: 0.42rem;
}

#header .bottom a:nth-of-type(2) span {
    font-size: 0.24rem;
    color: red;
}

#header input {
    height: 0.62rem;
    border: 0rem solid #000;
    border-radius: 0.6rem;
    flex: 1;
    background: white;
    font-size: 0.25rem;
    color: #b6b6b6;
}

/* 主体部分 */
#main {
    width: 7.5rem;
    flex: 1;
    overflow-y: auto;
}

/* 轮播 */
#main .banner {
    width: 7.5rem;
    height: 2.4rem;
}

#main .banner img {
    width: 7.5rem;
    height: 2.4rem;
}

/* 分类 */
#main .projects {
    width: 7.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: space-around;
}

#main .projects div {
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#main .projects div img {
    width: 0.8rem;
    height: 0.8rem;
    padding-top: 0.16rem;
    padding-bottom: 0.16rem;
}

#main .projects div a {
    padding-bottom: 0.2rem;
    font-size: 0.22rem;
}

/* 图片 */
#main .pic {
    width: 7.5rem;
    height: 1.7rem;
}

#main .pic img {
    width: 7.5rem;
    height: 1.7rem;
}

/* 公告 */
#main .announcement {
    width: 7.5rem;
    height: 0.55rem;
    display: flex;
    align-items: center;
}

#main .announcement img {
    width: 0.5rem;
    height: 0.25rem;
    margin-left: 0.3rem;
    margin-right: 0.22rem;
}

#main .announcement p {
    font-size: 0.24rem;
}

/* 28分钟快送 */
/* 上半部分 */
#main .quicklySend {
    width: 7.5rem;
    display: flex;
    flex-direction: column;
}

#main .quicklySend .title {
    width: 6.7rem;
    height: 0.8rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    background: #fff8ee;
    border-radius: 0.15rem;
    display: flex;
    justify-content: space-between;
}

#main .quicklySend .title div {
    display: flex;
    align-items: center;
}

#main .quicklySend .title div img {
    width: 0.29rem;
    height: 0.29rem;
}

#main .quicklySend .title div p {
    font-size: 0.2rem;
    margin-left: 0.12rem;
    color: red;
}

/* 下半部分 */
#main .quicklySend .content {
    width: 7.5rem;
    height: 1.9rem;
    display: flex;
}

#main .quicklySend .content>div {
    display: flex;
}

#main .quicklySend .content>div:nth-of-type(1) {
    margin-right: 0.5rem;
}

#main .quicklySend .content .left {
    height: 1.9rem;
    overflow: hidden;
    margin-right: 0.4rem;
}

#main .quicklySend .content .left span {
    display: block;
    width: 1.2rem;
    height: 0.26rem;
    font-size: 0.18rem;
    line-height: 0.26rem;
    color: white;
    background: red;
    text-align: center;
    border-top-left-radius: 0.13rem;
    border-bottom-right-radius: 0.13rem;
    margin-top: 0.35rem;
    margin-left: 0.2rem;
    margin-bottom: 0.2rem;
}

#main .quicklySend .content .left h1 {
    margin-left: 0.44rem;
    font-size: 0.3rem;
    margin-bottom: 0.15rem;
}

#main .quicklySend .content .left p {
    margin-left: 0.44rem;
    font-size: 0.2rem;
    color: #959595;
}

#main .quicklySend .content .right {
    height: 1.9rem;
    overflow: hidden;
}

#main .quicklySend .content .right img:nth-of-type(1) {
    margin-top: 0.6rem;
    width: 0.95rem;
    height: 1.2rem;
}

#main .quicklySend .content .right img:nth-of-type(1) {
    margin-top: 0.6rem;
    width: 1.11rem;
    height: 1.24rem;
}

/* 药品 */
#main .drug {
    width: 7.5rem;
    text-align: center;
    margin-bottom: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#main .drug div {
    margin-top: 0.4rem;
    width: 25%;
    display: flex;
    flex-direction: column;
}

#main .drug div img {
    margin: 0 auto;
    margin-bottom: 0.2rem;
    width: 0.7rem;
    height: 0.7rem;
}

#main .drug div a {
    font-size: 0.26rem;
    color: black;
}

/* 产品详情 */
#main .productDetails {
    width: 7.5rem;
    border-top: 0.01rem solid #efeff4;
}

#main .productDetails>div {
    width: 7.1rem;
    height: 2.44rem;
    padding: 0.28rem 0.2rem;
    display: flex;
}

#main .productDetails img {
    width: 3.36rem;
    height: 2.48rem;
    margin-right: 0.2rem;
}

#main .productDetails .right h1 {
    font-size: 0.26rem;
    margin-bottom: 0.2rem;
    line-height: 0.35rem;
}

#main .productDetails .right h1 span:nth-of-type(1) {
    width: 0.86rem;
    height: 0.32rem;
    display: inline-block;
    line-height: 0.32rem;
    text-align: center;
    font-size: 0.18rem;
    color: white;
    background: #ff5a5f;
    border-radius: 0.05rem;
}

#main .productDetails .right p {
    font-size: 0.22rem;
    line-height: 0.3rem;
    margin-bottom: 0.2rem;
    color: #9a9a9a;
}

#main .productDetails .right a {
    display: inline-block;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    height: 0.3rem;
    color: red;
    border: 0.01rem solid #f00;
    line-height: 0.3rem;
    border-radius: 0.05rem;
    margin-bottom: 0.2rem;
    margin-right: 0.1rem;
}

#main .productDetails .right>span:nth-of-type(1) {
    font-size: 0.24rem;
    color: red;
}

#main .productDetails .right>span:nth-of-type(2) {
    font-size: 0.16rem;
    color: #888;
    margin-left: 0.1rem;
    text-decoration: line-through;
}

#main .productDetails .right {
    position: relative;
}

#main .productDetails .right div {
    width: 0.48rem;
    height: 0.48rem;
    background: red;
    display: inline-block;
    line-height: 0.48rem;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    bottom: -0.1rem;
    right: 0.1rem;
}

#main .productDetails .right div span {
    font-size: 0.3rem;
    color: white;
}

/* 定坤丹图片 */
#main .picDingKd {
    width: 7.5rem;
    height: 3.1rem;
    margin-bottom: 0.2rem;
}

#main .picDingKd img {
    width: 7.5rem;
    height: 3.1rem;
}

/* 底部导航 */
#footer {
    width: 7.5rem;
    height: 1.05rem;
    border-top: 0.01rem solid #dddddd;
    background: white;
}

#footer ul {
    width: 7.5rem;
    height: 1.05rem;
    display: flex;
}

#footer ul li {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    width: 25%;
}

#footer ul li span {
    font-size: 0.42rem;
    color: #7c8085;
}

#footer ul li a {
    font-size: 0.22rem;
    color: #7f8389;
}

#footer ul li:nth-of-type(1) span,
#footer ul li:nth-of-type(1) a {
    color: red;
}